<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>资产发放</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../js/layer/layui-v2.3.0/layui/css/layui.css">
  <link rel="stylesheet" href="../js/ztree/css/zTreeStyle/zTreeStyle.css">
  <style>
    body{overflow:auto}
    .ztree li{padding: 5px 0;}
    .ztree *{font-size: 16px;}
    .wrapper{
      box-sizing: border-box;
      padding: 20px 90px 10px 90px;
    }
    .left, .middle, .right{
      display: inline-block;
      vertical-align: top;
      text-align: center;
    }
    .title{
      font-size: 22px;
    }
    .left, .right{
      width: 39.93%;
    }
    .middle{
      width: 18%;
      height: 460px;
      line-height: 460px;
      font-size: 25px;
    }
    .left .content, .right .content{
      margin-top: 14px;
      border: 1px solid #d9d9d9;
      height: 460px;
      overflow: auto;
      padding-left: 10%;
    }
    .choseUl li{
      text-align: left;
    }
    .layui-input-block{
      margin-left: 10px;
    }

    /*吴--添加的选中资产列表*/
    .assetCheck-wrap{
      width: 100%;
      padding: 10px;
      border:1px solid #eee;
      margin-bottom: 30px;
      border-radius:10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-box-shadow: 2px 2px 3px #ccc;
      -moz-box-shadow: 2px 2px 3px #ccc;
      box-shadow: 2px 2px 3px #ccc;
    }
    .assetCheck-title{
      width: 100%;
      margin-bottom: 10px;
      font-size:18px;
      line-height: 18px;
      color:#000;
      letter-spacing: 2px;
    }
    .assetCheck-list{
      width: 100%;
    }
    .assetCheck-list>li{
      display: inline-block;
      margin: 0 10px;
    }
    .list-item{
      width: 100%;
      padding:4px;
      text-align: center;
      border:1px solid transparent;
      cursor: pointer;
    }
    .list-item span{
      display: inline-block;
      font-size:15px;
      line-height: 15px;
      color:#666;
    }
    .list-item i{
      display: inline-block;
      font-size:15px;
      line-height: 15px;
      color:#666;
    }
    .list-item:hover{
      border-color:red;
    }
    .list-item:hover i{
      color:red;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="assetCheck-wrap">
      <div class="assetCheck-title">选中的资产:</div>
      <ul class="assetCheck-list">
        <li>
          <div class="list-item">
            <span>办公台式电脑</span>
            <i class="layui-icon layui-icon-close-fill"></i>
          </div>
        </li>
        <li>
          <div class="list-item">
            <span>执记笔记本</span>
            <i class="layui-icon layui-icon-close-fill"></i>
          </div>
        </li>
        <li>
          <div class="list-item">
            <span>办公楼——1栋</span>
            <i class="layui-icon layui-icon-close-fill"></i>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <!-- 部门 -->
      <div class="left">
        <span class="title">部门</span>
        <div class="content">
          <ul id="treeElm" class="ztree"></ul>
        </div>
      </div>
      <div class="middle">
        <span>>></span>
      </div>
      <!-- 具体人员 -->
      <div class="right">
        <span class="title">具体人员</span>
        <div class="content">
          <form class="layui-form" action="">
            <ul class="choseUl">
              <li>
                <div class="layui-input-block">
                  <input type="radio" name="renyuan"" title="赵文懂">
                </div>
              </li>
              <li>
                <div class="layui-input-block">
                  <input type="radio" name="renyuan"" title="李明">
                </div>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="../js/jquery/jquery.min.js"></script>
  <script src="../js/ztree/js/jquery.ztree.core.js"></script>
  <script src="../js/data/ztree.data.js"></script>
  <script src="../js/layer/layui-v2.3.0/layui/layui.all.js"></script>
  <script>
    // ztree配置
    var zSetting = {
      data: {
        simpleData: {
          enable: true
        }
      }
    };
    $(document).ready(function(){
      // 初始化ztree控件
      $.fn.zTree.init($("#treeElm"), zSetting, zNodes);
    });
  </script>
</body>
</html>